<template>
  <div>
    <div v-for="(kk,index) in valArr" :key="index" class="formitems">
      <el-input v-model="valArr[index]" placeholder="请输入" class="item-input" />
      <el-button @click.prevent="removeItem(index)"><i class="el-icon-delete" /></el-button>
    </div>
    <el-button @click="addItem">新增</el-button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      num: 1,
      valArr: []
    }
  },
  created(){
	const temVal=this.value
	this.valArr=temVal.split(",")
  },
  watch: {
    valArr: {
      handler(newVal, oldVal) {
		  console.log(newVal)
		  console.log(newVal.join(','))
        this.$emit('input', newVal.join(','))
      },
      deep: true
    }
  },
  methods: {
    removeItem(item) {
      this.valArr.splice(item, 1)
    },
    addItem() {
      this.valArr.push('')
      this.num++
    }
  }
}
</script>
<style>
.formitems{margin-bottom: 15px;}
.item-input{width: 200px;}
</style>
